<template>
    <div>
        <el-card class="top-card">
            审批单列表：
        </el-card>
        <el-table :data="pageResult.records" border style="margin-top: 20px">
            <el-table-column label="审批单id" prop="fid"></el-table-column>
            <el-table-column label="提交人" prop="submitPerson"></el-table-column>
            <el-table-column label="创建日期" prop="createdate"></el-table-column>
            <el-table-column label="流程" prop="flowName"></el-table-column>
            <el-table-column label="状态" prop="status">
                <template slot-scope="scope">
                    {{scope.row.status === 'A'?'待审批':
                    scope.row.status === 'B'? '拒绝' : '通过'}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-dropdown @command="handleCommand" trigger="click" :hide-on-click="true">
                        <el-button>
                            操作<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-if="scope.row.status === 'A'"
                                              :command="{operation:'audit',data:scope.row}">审批
                            </el-dropdown-item>
                            <el-dropdown-item :command="{operation:'delete',data:scope.row}">删除</el-dropdown-item>
                            <el-dropdown-item :command="{operation:'target',data:scope.row}">查看详情</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <el-divider></el-divider>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageResult.current"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageResult.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageResult.total">
        </el-pagination>

        <el-dialog
                title="审批"
                :visible.sync="dialogVisible.audit"
                width="50%">
            <audit ref="audit" @audit="handleSubmitAudit"></audit>
        </el-dialog>

        <el-dialog
                title="详情"
                :visible.sync="dialogVisible.target"
                width="75%">
            <target ref="target"></target>
        </el-dialog>
    </div>
</template>

<script>
    import {BatchesOfInventoryService} from "../../../model/gs/BatchesOfInventoryService";

    const batchesOfInventoryService = BatchesOfInventoryService.getInstance()

    const audit = () => import('./audit.vue')
    const target = () => import('./target.vue')

    export default {
        data() {
            return {
                searchForm: {
                    size: 5,
                    page: 1
                },
                pageResult: {},
                dialogVisible: {
                    audit: false,
                    target: false
                }
            }
        },
        methods: {
            getForms() {
                batchesOfInventoryService.getForms(this.searchForm).then(({data}) => {
                    if (data.code === 0) {
                        this.pageResult = data.data
                    }
                })
            },
            handleCommand(command) {
                console.log(command)
                switch (command.operation) {
                    case 'audit':
                        this.handleAudit(command.data);
                        break;
                    case 'target':
                        this.handleShowDetails(command.data);
                        break;
                    case 'delete':
                        this.handleDelete(command.data);
                        break;
                }
            },
            handleAudit(row) {
                this.dialogVisible.audit = true
                this.$nextTick(() => {
                    this.$refs.audit.init(row)
                })
            },
            handleSubmitAudit(formAudit) {
                batchesOfInventoryService.submitAudit(formAudit).then(({data}) => {
                    if(data.code === 0){
                        this.dialogVisible.audit = false
                        this.getForms(this.searchForm)
                    }
                })
            },
            handleDelete(row) {
                batchesOfInventoryService.removeForm(row.fid).then(({data}) => {
                    if(data.code === 0){
                        this.$message.success({
                            message: '删除成功',
                            duration: 1000
                        })
                        this.getForms()
                    }
                })
            },
            handleShowDetails(row) {
                this.dialogVisible.target = true
                this.$nextTick(() => {
                    this.$refs.target.init(row)
                })
            },
            //size改变的方法
            handleSizeChange(size) {
                this.searchForm.size = size
                this.getForms()
            },
            //当前页改变的方法
            handleCurrentChange(page) {
                this.searchForm.page = page
                this.getForms()
            }
        },
        created() {
            this.getForms()
        },
        components: {
            audit,target
        }
    }
</script>

<style scoped>

</style>
